#include ("/_includes/_layout.html")
#define css()
<style type="text/css">
.page-showcase-attachment {
    position: relative;
}
.page-showcase-attachment::after {
    clear: both;
    content: "";
    display: table;
}
.page-showcase-attachment .media-container {
    margin-right: 150px;
    overflow: hidden;
}
.page-showcase-attachment .category-container {
    margin-left:15px;
    background: #f8f8f8 none repeat scroll 0 0;
    box-sizing: border-box;
    float: right;
    min-height: 400px;
    padding: 10px 0;
    width: 200px;
}
.page-showcase-attachment .category-list {
    margin-bottom: 15px;
    padding-left:25px;
    overflow-y: auto;
}
.page-showcase-attachment .category-list li {
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    margin-right: 1px;
    padding: 0 31px 0 8px;
    position: relative;
}
.page-showcase-attachment .category-list li:hover {
    background: #fafafa none repeat scroll 0 0;
}
.page-showcase-attachment .category-list li.active {
    background: #fff none repeat scroll 0 0;
}
.page-showcase-attachment .category-list .category-name {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80px;
}
.page-showcase-attachment .category-list .category-num {
    color: #999;
    position: absolute;
    right: 8px;
    top: 0;
}
.ui-box {
    margin-bottom: 15px;
}

.ui-btn-success {
    background: #4b0 none repeat scroll 0 0;
    border-color: #3da900;
    color: #fff;
}
.ui-btn {
    background: #f8f8f8 none repeat scroll 0 0;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-sizing: content-box;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    padding: 0 12px;
    text-align: center;
}

.page-showcase-attachment .media-title {
    height: 28px;
}
.page-showcase-attachment .media-title-wrap h1 {
    display: inline;
    font-size: 16px;
    line-height: 28px;
}
.page-showcase-attachment .media-title-wrap h1, .page-showcase-attachment .media-title-wrap a {
    margin-right: 10px;
}

.page-showcase-attachment .action-bar {
    background: #f8f8f8 none repeat scroll 0 0;
    line-height: 28px;
    margin-bottom: 20px;
    min-height: 28px;
    padding: 6px;
}
.page-showcase-attachment .action-bar label {
    display: inline-block;
}
.page-showcase-attachment .action-bar label input[type="checkbox"] {
    margin: 0 6px 0 0;
    vertical-align: baseline;
}
.page-showcase-attachment .action-bar .batch-opt {
    margin-left: 20px;
}

.page-showcase-attachment .image-list {
    margin: 0 0 0 -20px;
}
.page-showcase-attachment .image-list::after {
    clear: both;
    content: "";
    display: table;
}
.page-showcase-attachment .image-item {
    float: left;
    margin: 0 0 20px 20px;
    width: 100px;
}
.page-showcase-attachment .image-item .image-box {
    background: #ddd none no-repeat scroll 50% 50% / cover ;
    height: 100px;
    width: 100px;
}
.page-showcase-attachment .image-item .image-title {
    padding: 8px 0 0;
}
.page-showcase-attachment .image-item .image-title label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 160px;
}
.page-showcase-attachment .image-item .image-title label input[type="checkbox"] {
    margin: 0 6px 0 0;
    vertical-align: baseline;
}
.page-showcase-attachment .image-item .image-opt a {
    margin-right: 8px;
}
.page-showcase-attachment .action-bar {
    background: #f8f8f8 none repeat scroll 0 0;
    line-height: 28px;
    margin-bottom: 20px;
    min-height: 28px;
    padding: 6px;
}
</style>
#end
#@layout("我的图片", "wxmall,点步科技", "Wxmall社区","wxmall") 
#define content()
<div class="wrapper wrapper-content">
	#include ("/_includes/menu-second.html")
	<div class="app-content">
	<div class="ibox-content">
	<div class="page-showcase-attachment" id="mainTable">
	   <div class="category-container">
		   <div>
			   <ul class="category-list">
			   <li class="ui-tooltip" data-id="" data-name=""><span class="category-name">全部</span></li>
			   #for (list:imageGroups)
				   <li class="ui-tooltip" data-id="#(list.id)" data-name="#(list.groupName)">
				      <span class="category-name">#(list.groupName)</span>
				      <span class="category-num">#(list.imageNum)</span>
				   </li>
	           #end
			   </ul>
			   <div class="text-center">
			   <a id="addGroup" href="javascript:;" class="ui-btn text-center">+ 添加分组</a>
			   </div>
		   </div>
	   </div>
	   <div class="media-container">
	     <div class="media-title ui-box">
			<span class="media-title-wrap">
			<h1>全部</h1>
			<a id="rename" data-id="" href="javascript:void(0);" style="display: none;">重命名</a>
			</span>
			<a id="uploadImage" class="btn btn-success pull-right" href="javascript:void(0);">上传图片</a>
		</div>
		<div class="action-bar clearfix">
			<label class="inline"><input type="checkbox" id="all" title="全选/反选">全选</label>
			<a id="editGroup" class="batch-opt c-gray" href="javascript:;">修改分组</a>
			<!-- <a class="batch-opt c-gray" href="javascript:;" style="cursor: not-allowed;">删除</a> -->
	    </div>
	    <div class="image-list">
	   </div>
	   <div class="clearfix"><div id="pager" class="jqpager" style="margin-bottom: 1px;float: right;"></div></div>
	   </div>
	</div>
	</div>
	</div>
</div>
#end
<script type="text/javascript">
var addGroupDialog;
var editGroupDialog;
var params = {};
params.rows = 24;
var table = new obz.TableView("pager", obz.ctx + "/attachment/getImageList", params, function(resp){
	$(".image-list").empty();
	if(resp && resp.list && resp.list.length>0){
		var dataList = resp.list;
		if(dataList.length>0){
			for(var i=0;i<dataList.length;i++){
				var _row = dataList[i];
				var trHtml = obz.dataTemplate4obj($("#image_item_tpl").html(), _row);
				$(".image-list").append(trHtml);
			}
		}
	}
});
table.init();

$("ul.category-list li").click(function() {
	$("ul.category-list li").each(function(){	
		 $(this).removeClass("active");
	}); 
	$(this).addClass("active");
	$("#rename").show();
	var rename = document.getElementById('rename') ;
	rename.setAttribute("data-id",$(this).attr("data-id"));
	$("h1").html($(this).attr("data-name"));
	params.id = $("ul.category-list li.active").attr("data-id");
	table.init();
});
 
$("#uploadImage").click(function() {
 	var params={};
 	var groupId = $("ul.category-list li.active").attr("data-id") || null;
 	if(groupId != null){
 		params.groupId = groupId;
 	}
 	params.rows = 24;
 	obz.uploadImage(params,function (){
		location.href=obz.ctx+"/attachment"; 
 	});
});

$("#addGroup").click(function() {
 	addGroupDialog = BootstrapDialog.show({
		size: BootstrapDialog.SIZE_LARGE,
		title: "添加分组",
        message: $('<div></div>').load(obz.ctx+'/attachment/addGroup')
    });
});
 
$("#rename").click(function() {
 	var id=$(this).attr("data-id");
 	var url=obz.ctx+'/attachment/addGroup?id='+id;
 	addGroupDialog = BootstrapDialog.show({
		size: BootstrapDialog.SIZE_LARGE,
		title: "重命名",
        message: $('<div></div>').load(url)
    });
});
 
$("#editGroup").click(function() {
 	var obj=$("input[name='commchk']");
 	var imageId='';    
 	for(var i=0; i<obj.length; i++){    
    	if(obj[i].checked) imageId+=obj[i].value+','; 
 	}
 	if(imageId!=''){
	 	var id=$("ul.category-list li.active").attr("data-id");
        var url="";
        if(id){
       	 	url=obz.ctx+'/attachment/editGroup?groupId='+id+"&imageId="+imageId;
		}else{
		 	url=obz.ctx+'/attachment/editGroup?imageId='+imageId; 
	 	}
        editGroupDialog = BootstrapDialog.show({
			size: BootstrapDialog.SIZE_LARGE,
			title: "修改分组",
	        message: $('<div></div>').load(url)
    	});
 	}else{
	 	obz.info('请选择图片');
 	}
});
 
 $("#all").click(function(){
	if(this.checked){   
		$("input[name='commchk']").prop("checked",true);
	}else{
		$("input[name='commchk']").prop("checked",false);
	}   
});
function del(obj){
	var ids=$(obj).attr("id");
	obz.showMessage("确定删除该图片？", function(){
		obz.ajaxJson(obz.ctx + "/attachment/del", {ids: ids}, function(resp){
			if(resp.code==200){
				table.init();
			}
		});
	});
	return false;
}
</script>
<script type="text/template" id="image_item_tpl">
<div class="image-item">
		<div class="image-box" style="background-image: url('{imgPath}');"></div>
		<div class="image-title">
			<label><input type="checkbox" value="{id}" name="commchk" id="checkbox_{id}"></label>
			</div>
			<div class="image-opt">
			 <a href="javascript:;" id="{id}" onclick="del(this)">删除</a>
			</div>
		</div>
</script>